import { FC, useEffect, useState } from 'react';
import styles from './proManagement.less';
import { Table, Input, Button, message } from 'antd';
//获取专业标题
import { DelIndustry, getIndustry, getSkillLabel, getTableList } from '../../services/index'
import { ISkillLabel, IndustryQuery, TableQuery, TableItem } from '@/utils/interface';
import { EyeOutlined, RollbackOutlined, FormOutlined, DeleteOutlined, DeliveredProcedureOutlined } from '@ant-design/icons';
import { Link } from 'umi';
const status = ['全部', '草稿', '已发布', '待审核', '已驳回'];
const sxtype = ['全部', '生产实训', '教学实训', '专业群实训'];
const proManagement: FC = (props) => {
    const success = () => {
        message.success('删除成功');
    };
    const columns = [
        {
            title: '项目名称',
            dataIndex: 'proname',
        },
        {
            title: '版本',
            dataIndex: 'version',
        },
        {
            title: '任务量',
            dataIndex: 'taskCount',
        },
        {
            title: '所属专业',
            dataIndex: 'trade',
        },
        {
            title: '所属行业',
            dataIndex: 'major',
        },
        {
            title: '实训类型',
            render: (row: TableItem) => {
                let statuSum = row.sxtype;
                if (statuSum === '1') {
                    return <span key={1}>生产实训</span>
                } else if (statuSum === '2') {
                    return <span key={2}>教学实训</span>
                } else if (statuSum === '3') {
                    return <span key={3}>专业群实训</span>
                }
            }
        }, {
            title: '推荐完成天数',
            dataIndex: 'subjecttime',
        }, {
            title: '更新时间',
            dataIndex: 'updateTime',
        }, {
            title: '演示',
            render: () => <span>查看</span>
        }, {
            title: '状态',
            render: (row: TableItem) => <span className={styles[`status${row.status}`]}>{status[Number(row.status)]}</span>
        }, {
            title: '操作',
            render: (row: TableItem) => {
                let statuSum = row.status;
                if (statuSum === '3') {
                    return <div className={styles.action}>
                        <EyeOutlined style={{ color: '#679cf6' }} />
                        <RollbackOutlined style={{ color: '#679cf6' }} />
                    </div>
                } else if (statuSum === '1') {
                    return <div className={styles.action}>
                        <Link to={`/teachers/addProject?versionId=${row.versionId}&proId=${row.id}&see=false`}>
                            <FormOutlined style={{ color: '#679cf6' }} />
                        </Link>
                        <DeliveredProcedureOutlined style={{ color: '#679cf6' }} />
                        <DeleteOutlined style={{ color: '#679cf6' }} onClick={() => {
                            setprojectVersionId(row.versionId)
                            success()
                        }} />
                    </div>
                } else if (statuSum === '2') {
                    return <div className={styles.action}>
                        <EyeOutlined style={{ color: '#679cf6' }} />
                    </div>
                }
            }
        },
    ];
    let [projectVersionId, setprojectVersionId] = useState('');
    let [queryparams1, setqueryparams1] = useState<TableQuery>({ isAsc: 'desc', pageNum: 1, pageSize: 10, } as unknown as TableQuery);
    useEffect(() => {
        if (projectVersionId) {
            DelIndustry(projectVersionId).then(ok => {
                queryparams1 = { ...queryparams1, status: curStatus, sxtype: curTypes, specialtyTag: curSkill, industryTag: IndustryActive, proName }
                getTableList(queryparams).then(ok => {
                    if (ok.code == 200) {
                        settableList(ok.rows)
                    }
                })
            })
        }

    }, [projectVersionId]);
    //类型高亮
    let [curTypes, setcurTypes] = useState(0)
    //专业高亮
    let [curSkill, setCurSkill] = useState('');
    //状态高亮
    let [curStatus, setCurStatus] = useState(0);
    //获取专业标题
    let [skillLabel, setSkillLabel] = useState<ISkillLabel[]>([]);
    useEffect(() => {
        getSkillLabel().then(ok => {
            if (ok.code == 200) {
                setSkillLabel([{
                    children: null,
                    id: "",
                    name: "全部",
                    parentId: "A0000",
                }, ...ok.data])
            }
        })
    }, []);
    //获取行业标题
    let [curIndustry, setcurIndustry] = useState<IndustryQuery[]>([]);
    useEffect(() => {
        getIndustry().then(ok => {
            if (ok.code == 200) {
                setcurIndustry([{
                    children: null,
                    value: "",
                    label: "全部",
                    parentId: "A0000",
                }, ...ok.data])
            }
        })
    }, []);
    //行业高亮
    let [IndustryActive, setIndustryActive] = useState('');
    //搜索
    let [proName, setproName] = useState('');
    let [title, settitle] = useState('')
    //表格数据
    let [tableList, settableList] = useState<TableItem[]>([]);
    let [queryparams, setqueryparams] = useState<TableQuery>({ isAsc: 'desc', pageNum: 1, pageSize: 10, } as unknown as TableQuery);
    useEffect(() => {
        let queryParams: TableQuery = {} as TableQuery;
        queryParams = { ...queryParams, status: curStatus, sxtype: curTypes, specialtyTag: curSkill, industryTag: IndustryActive, proName }
        try {
            getTableList(queryParams).then(ok => {
                if (ok.code == 200) {
                    settableList(ok.rows)
                }
            })
        } catch (e) {
            alert('暂无数据')
        }

    }, [curTypes, curSkill, curStatus, IndustryActive, proName]);
    return <div className={styles.proManagement}>
        <div className={styles.box}>
            <div className={styles.header}>
                <div className={styles.h1}>
                    <span>项目</span>
                    <span>/</span>
                    <span>项目管理</span>
                </div>
            </div>
            <div className={styles.title}>
                <div className={styles.t2}>
                    <p>实训类型:</p>
                    <p>
                        {
                            sxtype.map((item, index) => {
                                return <span key={index}
                                    className={index == curTypes ? styles.active : ''}
                                    onClick={() => {
                                        setcurTypes(index)
                                    }}
                                >{item}</span>
                            })
                        }
                    </p>
                </div>
                <div className={styles.t1}>
                    <p>专业:</p>
                    <p>
                        {
                            skillLabel.map((item, index) => {
                                return <span key={index}
                                    className={item.id == curSkill ? styles.active : ''}
                                    onClick={() => {
                                        setCurSkill(item.id)
                                    }}
                                >{item.name}</span>
                            })
                        }
                    </p>
                </div>
                <div className={styles.t3}>
                    <p>行业:</p>
                    <p>
                        {
                            curIndustry.map((item, index) => {
                                return <span key={index}
                                    className={item.value == IndustryActive ? styles.active : ''}
                                    onClick={() => {
                                        setIndustryActive(item.value)
                                    }}
                                >{item.label}</span>
                            })
                        }
                    </p>
                </div>
                <div className={styles.t2}>
                    <p>状态:</p>
                    <p>
                        {
                            status.map((item, index) => {
                                return <span key={index}
                                    className={index == curStatus ? styles.active : ''}
                                    onClick={() => {
                                        setCurStatus(index)
                                    }}
                                >{item}</span>
                            })
                        }
                    </p>
                </div>
            </div>
        </div>
        <div className={styles.bottom}>
            <div className={styles.search}>
                <input type="checkbox" />仅看最新版本
            <Input placeholder="搜索项目" className={styles.input} value={title} onChange={(e) => settitle(e.target.value)} onKeyDown={(e) => {
                    if (e.keyCode === 13) {
                        setproName(title)
                    }
                }} />
                <Link to="/teachers/addProject?see=false">
                    <Button type="primary">+添加项目</Button>
                </Link>
            </div>
            <Table rowKey="versionId" dataSource={tableList} columns={columns}></Table>
        </div>
    </div>
}
export default proManagement